<template>
  <div class="left-aside">
    <div class="banner">
      <img :src="img" alt="">
      <h2>弹性平台</h2>
    </div>
    <el-menu  default-active="0" class="el-menu-vertical-demo">
      <el-menu-item v-for="(item,index) in items" :key="index" :index="`${index}`">
        <span class="svg-container svg-container_login"><icon-svg :icon-class="item.icon" /></span>
        <router-link   :to="item.url">{{item.value}}</router-link>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import img from '@/assets/photo/avatar.gif'
export default {
  name: 'leftAside',
  data() {
    return {
      items:[
        {value: '基本信息',url: '/home/basicInfo',icon: 'jibenxinxi'},
        {value: '客户信息清单',url: '/home/customerInfo',icon: 'kehuxinxi'},
        {value: '企业与产品绑定',url: '/home/enterpriseProBinding',icon: 'qiye'},
        {value: '责任组合对象配置',url: '/home/responsibilityCombination',icon: 'zeren'},
        {value: '企业福利配置',url: '/home/otherBenefits',icon: 'fuli'},
      ],
      img: img
    }
  },
  methods: {
    
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  $bg: #eee;
  $bg1: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  .left-aside {
    width:17%;
    height: 100vh;
    background-color: $bg;
    .svg-icon {
      width: 25px;
      height: 25px;
      color:#e6e6e68c;
      vertical-align: -8px;
      fill: currentColor;
      overflow: hidden;
    }
    .banner{
      background:$bg1;
      display:flex;
      height:80px;
      flex-flow:row nowrap;
      color:$light_gray;
      justify-content: space-around;
      align-items:center;
    }
    .banner img{
      width:49px;
      height:49px;
      border-radius:50%;
    }
    .el-menu-item {
      display:flex;
      flex-flow:row nowrap;
      justify-content: space-around;
      align-items: center;
    } 
    .el-menu-item a{
      width:70%;
    }
  }
</style>
